<template>
  <div>
    <header>
      <ul>
        <li v-show="flag == 0" @click="dialogVisible = true">登录</li>
        <li v-show="flag == 0">|</li>
        <li v-show="flag == 0">注册</li>
        <li v-show="flag == 1" @click="del">欢迎你{{ name }}</li>
        <li>我的订单</li>
        <li>我的收藏</li>
      </ul>
      <div>
        <div class="box" @click="$router.push('/gwc')">
          <i class="el-icon-shopping-cart-2"></i>
          购物车
        </div>
      </div>
    </header>
    <nav>
      <img src="http://106.15.179.105/img/logo.c8999c02.png" alt="" />
      <ul>
        <router-link to="/" tag="li">首页</router-link>
        <router-link to="/goods" tag="li">全部商品</router-link>
        <router-link to="/about" tag="li">关于我们</router-link>
      </ul>
      <div class="inp">
        <el-input placeholder="请输入内容" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </nav>
    <el-dialog title="登录" :visible.sync="dialogVisible" width="20%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="width: 100%"
            type="primary"
            @click="submitForm('ruleForm')"
            >立即登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { login } from '@/api/login.js'
export default {
  data() {
    return {
      li: 0,
      dialogVisible: false,
      ruleForm: {
        userName: '',
        password: '',
      },
      rules: {
        userName: [
          { required: true, message: '请输用户名', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输用户名', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
      },
      name: this.$store.state.name || '',
      flag: 0,
    }
  },
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          login({
            userName: this.ruleForm.userName,
            password: this.ruleForm.password,
          }).then((res) => {
            console.log(res.data.user.userName)
            if (res.data.code == '001') {
              this.$store.commit('name', res.data.user.userName)
              this.$store.commit('ID', res.data.user.user_id)
              this.flag = 1
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success',
                offset: 100,
              })
              this.dialogVisible = false
            } else {
              this.$notify({
                title: '错误',
                message: res.data.msg,
                type: 'error',
                offset: 100,
              })
              this.dialogVisible = false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    del() {
      this.$confirm('你确定要退出, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.name = ''
          this.flag = 0
          this.$store.commit('del')
          this.$message({
            type: 'success',
            message: '退出成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出',
          })
        })
    },
  },
  computed: {},
  watch: {},
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header {
  width: 100%;
  height: 40px;
  background: #000;
  color: #ccc;
  display: flex;
  margin-bottom: 30px;

  ul {
    margin-left: 67.8%;
    margin-right: 20px;
    width: 300px;
    height: 100%;
    list-style: none;
    display: flex;

    justify-content: space-between;
    li {
      margin: 0px 1px;
      line-height: 40px;
      font-size: 14px;
      cursor: pointer;
    }
    li:hover {
      color: #fff;
    }
  }
  .box {
    width: 100px;
    height: 100%;
    line-height: 40px;
    background: rgb(61, 61, 61);
    text-align: center;
    cursor: pointer;
  }
  .box:hover {
    background: #fff;
    color: red;
  }
}
nav {
  width: 1400px;
  height: 60px;
  margin: 0 auto;
  border-bottom: 1px solid rgb(228, 226, 226);
  display: flex;
  align-items: center;
  img {
    width: 211px;
    height: 100%;
  }
  ul {
    margin-left: 200px;
    width: 240px;
    height: 100%;
    list-style: none;
    display: flex;
    color: #ccc;

    justify-content: space-between;
    li {
      width: 80px;
      text-align: center;
      margin: 0px 1px;
      line-height: 60px;
      font-size: 14px;
      border: 2px solid transparent;
      cursor: pointer;
    }
    li:hover {
      color: #000;
    }
  }
  .inp {
    margin-left: 420px;
    display: flex;
    align-items: center;
    width: 330px;
    height: 100%;
  }
}
.router-link-exact-active {
  border-bottom: 2px solid blue;
  color: blue;
}
</style>
